<script setup lang="ts">
import useDialogStore from '@/stores/modules/dialog'
import { MessageType, SendStatus } from '@/stores/modules/dialog'
import type { DialogItem } from '@/stores/modules/dialog'

const dialogStore = useDialogStore()

const emit = defineEmits(["sendMessage"]);
function sendMessage(item: DialogItem) {
    emit('sendMessage', item)
}

function playAudio(url: string) {
    const audio = new Audio(url);
    audio.play();
}


</script>

<template>

    <div class="h-full  overflow-scroll ">
        <div v-for="i in dialogStore.messages">
            <div class="message-item right" v-if="i.isSelf">
                <!-- <div class="flex flex-col item-start "> -->
                <div class="flex flex-1 flex-col items-end">
                    <div class="w-full flex flex-row justify-end">
                        <div class="h-full flex flex-col justify-around">
                            <IIcon class="text-8xl" icon="codex:loader" v-if="i.status === SendStatus.PENDING" />
                            <div v-else-if="i.status === SendStatus.FAILED">
                                <IIcon class="text-8xl" icon="weui:refresh-filled" @click="sendMessage(i)" />
                                <IIcon class="text-8xl c-red" icon="weui:error-filled" />
                            </div>
                        </div>
                        <div class="message-content" v-if="i.type === MessageType.TEXT">
                            {{ i.content }}
                        </div>
                        <div class="message-content" v-else-if="i.type === MessageType.AUDIO" @click="playAudio(i.content)">
                            {{ i.duration?i.duration.toFixed(0)+'"':'' }}
                            <IIcon class="text-8xl " icon="mingcute:voice-line" />
                        </div>
                    </div>

                    <div class="flex">
                        <!-- <IIcon icon="weui:error-filled" class="c-red text-8xl" />
                      <IIcon icon="weui:refresh-filled" class="text-8xl " /> -->
                        <!-- <IIcon class="text-8xl" icon="weui:pencil-filled" /> -->
                    </div>
                </div>
                <!--
              </div> -->
                <van-image height="40" round src="头像URL" width="40" />
            </div>


            <div class="message-item left" v-else>
                <van-image height="40" round src="头像URL" width="40" />
                <div class="message-content" v-if="i.type === MessageType.TEXT">
                    {{ i.content }}
                </div>
            </div>

        </div>
    </div>
</template>
<style lang="less" scoped>
.message-item {
    display: flex;
    padding: 10px;
    gap: 10px;
    word-wrap: break-word;

    &.left {
        justify-content: flex-start;
        color: #000;
    }

    &.right {
        justify-content: flex-end;
    }

    .message-content {
        background: #f7f7f7;
        padding: 10px;
        border-radius: 8px;
        max-width: 70%;
    }

    &.right .message-content {
        background: #07c160;
        color: white;
    }
}
</style>